<script setup>
import { ref } from "vue";
import { addProductType, updateProductType } from "@/api/productType";

const form = ref(null);
const emit = defineEmits(["success"]);
// 弹窗控制
const dialogVisible = ref(false);

const statusMap = [
  { label: "正常", value: 1 },
  { label: "禁用", value: 0 },
];

// 表单数据
const defaultForm = {
  typeName: "",
  description: "",
};
const formModel = ref({ ...defaultForm });

const open = async (row) => {
  dialogVisible.value = true;
  if (row.typeId) {
    formModel.value = { ...row };
    // 移除属性
    delete formModel.value.createTime;
  } else {
    formModel.value = { ...defaultForm };
  }
};

// 暴露给父组件
defineExpose({
  open,
});

//表单验证规则
const rules = {
  typeName: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
    {
      pattern: /^\S{1,10}$/,
      message: "分类名必须是1-10位的非空字符",
      trigger: "blur",
    },
  ],
};

// 添加或编辑分类
const articleChannel = async () => {
  // 表单预校验
  await form.value.validate();

  // 添加分类
  if (!formModel.value.typeId) {
    const res = await addProductType(formModel.value);
  } else {
    // 编辑分类
    const res = await updateProductType(formModel.value);
  }
  //关闭弹窗
  dialogVisible.value = false;
  // 提示成功
  ElMessage({
    message: `${formModel.value.typeId ? "编辑" : "添加"}成功`,
    type: "success",
    plain: true,
  });

  emit("success", formModel.value.typeId ? "update" : "add");
};

// 点击取消
const cancel = () => {
  dialogVisible.value = false;
  formModel.value = { ...defaultForm };
};
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="formModel.typeId ? '编辑分类' : '添加分类'"
    width="30%"
  >
    <!-- 内容 -->
    <div>
      <el-form
        ref="form"
        :model="formModel"
        :rules="rules"
        label-width="100px"
        style="padding-right: 30px"
      >
        <el-form-item label="类型名称" prop="typeName">
          <el-input v-model="formModel.typeName" minlength="1" maxlength="10">
          </el-input>
        </el-form-item>
        <el-form-item label="类型描述">
          <el-input
            v-model="formModel.description"
            minlength="1"
            maxlength="15"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="状态" v-if="formModel.typeId">
          <el-select v-model="formModel.status" style="width: 150px">
            <template #prefix>
              <el-tag :type="formModel.status === 1 ? 'success' : 'danger'">
                {{ formModel.status === 1 ? "正常" : "禁用" }}
              </el-tag>
            </template>
            <el-option
              v-for="item in statusMap"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="articleChannel"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
